<template>
  <div id="home">
    <el-container>
      <!-- 左边侧边栏 -->
      <el-aside :width="asideW">
        <el-row class="tac">
          <el-col :span="24" class="nav">
            <el-menu default-active="1-4" :collapse="isCollapse" :unique-opened="true" role="menubar" text-color="rgb(220, 212, 211)" active-text-color="#fff" router>
              <!-- 分组1 -->
              <el-submenu index="1" name="1">
                <template slot="title">
                  <div class="titleM">
                    <i class="el-icon-s-data"></i>
                    <span>数据统计</span>
                  </div>
                </template>
                <el-menu-item index="datas">数据统计(地域)</el-menu-item>
                <el-menu-item index="provincesales">省销售统计(地域)</el-menu-item>
                <el-menu-item index="citysales">市销售统计(地域)</el-menu-item>
                <el-menu-item index="areasales">区销售统计(地域)</el-menu-item>
                <el-menu-item index="provinceactive">省活跃度统计(地域)</el-menu-item>
                <el-menu-item index="cityactive">市活跃度统计(地域)</el-menu-item>
                <el-menu-item index="areaactive">区活跃度统计(地域)</el-menu-item>
              </el-submenu>

              <!-- 分组2 -->
              <el-submenu index="2" name="2">
                <template slot="title">
                  <div class="titleM">
                    <i class="el-icon-folder"></i>
                    <span slot="title">卡号管理</span>
                  </div>
                </template>
                <el-menu-item index="cart">卡号批次设置</el-menu-item>
              </el-submenu>

              <!-- 分组3 -->
              <el-submenu index="3" name="3">
                <template slot="title">
                  <div class="titleM">
                    <i class="el-icon-user"></i>
                    <span slot="title">大客户专员专区</span>
                  </div>
                </template>
                <el-menu-item index="bigcustomerlist">大客户专员列表</el-menu-item>
                <el-menu-item index="setup">设置</el-menu-item>
                <el-menu-item index="orderlist">订单列表</el-menu-item>
              </el-submenu>

              <!-- 分组4 -->
              <el-submenu index="4" name="4">
                <template slot="title">
                  <div class="titleM">
                    <i class="el-icon-notebook-1"></i>
                    <span slot="title">财务管理</span>
                  </div>
                </template>
                <el-menu-item index="walletlist">钱包列表</el-menu-item>
                <el-menu-item index="financiallist">订单列表</el-menu-item>
                <el-menu-item index="revieworderlist">审核订单列表</el-menu-item>
                <el-menu-item index="manifestlist">提现列表</el-menu-item>
              </el-submenu>

              <!-- 分组5 -->
              <el-submenu index="5" name="5">
                <template slot="title">
                  <div class="titleM">
                    <i class="el-icon-setting"></i>
                    <span slot="title">系统管理</span>
                  </div>
                </template>
                <el-menu-item index="rersonnel">人员管理</el-menu-item>
                <el-menu-item index="authority">角色管理</el-menu-item>
                <el-menu-item index="role">权限管理</el-menu-item>
                <el-menu-item index="menu">菜单管理</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <!-- 右边部分 -->
      <el-container>
        <!-- 头部 -->
        <el-header height="110px">
          <div class="header">
            <!-- 左边 -->
            <div>
              <i v-if="!isCollapse" class="el-icon-s-fold" @click="collapseF"></i>
              <i v-else class="el-icon-s-unfold" @click="collapseF"></i>
            </div>
            <!-- 右边 -->
            <div class="full-screen">
              <img :src="src1" v-if="!fullS" @click="fullScreen" />
              <img :src="src2" v-else @click="fullScreen" />
            </div>
            <div class="user" @click="clickUser">
              <img :src="userImg" alt="头像">
              <p class="username">{{userName}}</p>
            </div>
            <div class="select" v-show="userShow">
              <ul class="ul1">
                <li class="li1">
                  <div class="title">登录用户</div>
                  <ul>
                    <li class="li2">{{userName}}</li>
                  </ul>
                </li>
                <li class="li1">
                  <div class="title">系统操作</div>
                    <ul>
                      <li class="li2">清除本地数据</li>
                      <li class="li2" @click="setPass">修改登录密码</li>
                      <li class="li2" @click="setName">修改我的信息</li>
                      <li class="li2">退出登录</li>
                    </ul>
                </li>
              </ul>
            </div>
          </div>
          <!-- 分页部分 -->
          <div class="tags"></div>
        </el-header>

        <!-- 主体内容部分 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "Home",
  data() {
    return{
      asideW: "200px",
      fullS: false,
      src1: "",
      src2: "",
      userImg: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
      userName: "",
      userShow: false,
      isCollapse: false,
    }
  },

  created(){
    this.getParams();
  },
  watch: {
    // '$route':'getParams';
    isCollapse(val) {
      this.asideW = val ? "64px" : "200px";
    }
  },
  mounted() {
    document.addEventListener("fullscreenchange", () => {
      this.fullS = !this.fullS;
      console.log(this.fullS)
    });
  },

  methods: {
    getParams() {
      // console.log(this.$route.params);
      
      this.userImg = this.$route.params.userInfo.userImg;
      this.userName = this.$route.params.userInfo.username;
    },
    collapseF() {
      this.isCollapse = !this.isCollapse;
    },
    fullScreen() {
      if (!this.fullS) {
        document.documentElement.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    },
    clickUser() {
      this.userShow = !this.userShow;
    },
    setPass() {
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.{6,32}/,
        inputErrorMessage: '密码位数为6~32'
      }).then(({ value }) => {
        axios.post("http://47.108.201.43:3000/api/setChangePassword",{
          password: value,
        }).then((res)=>{
          if(res.data.code == "200"){
            // console.log(res);
            this.$message({
              type: 'success',
              message: '密码修改成功'
            });
          }else {
            this.$message({
              type: 'error',
              message: '密码修改失败：' + res.data.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });       
      });
    },
    setName() {
      this.$prompt('请输入新用户名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '不能为空'
      }).then(({ value }) => {
        axios.post("http://47.108.201.43:3000/api/Setuporganization",{
          nickname: value,
        }).then((res)=>{
          console.log(res);
          if(res.data.code == "200"){
            this.$message({
              type: 'success',
              message: '用户名修改成功'
            });
          }else {
            this.$message({
              type: 'error',
              message: '用户名修改失败：' + res.data.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });       
      });
    },
  }
}
</script>

<style scoped>
#home{
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100vh;
}
/* .nav {
  height: 100vh !important;
} */
/* 侧边导航 */
.el-aside {
  width: 200px;
  height: 100vh;
  background-color: #d3dce6;
  color: #333;
  line-height: 200px;
  overflow-x: hidden;
}

.el-menu {
  height: 100vh;
  background-color: rgb(1, 20, 44);
}

/* .el-submenu .el-submenu__title:hover{
  background-color: chocolate !important;
} */
.titleM {
  width: 100%;
  height: 100%;
  margin-left: -20px;
  padding: 0 20px;
  background-color: rgb(1, 20, 44);
}
.titleM:hover {
  color: #fff;
}




.el-menu-item {
  padding-left: 50px!important;
  background-color: #010b17!important;
}
.el-menu-item:hover {
  background-color: #009ffe!important;
  color: #fff!important;
}

/* 头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.full-screen {
  position: absolute;
  right: 170px;
  top: 18px;
}
.full-screen > img {
  width: 24px;
  height: 24px;
}

.el-icon-s-fold, .el-icon-s-unfold {
  font-size: 30px;

}

/* 用户信息 */
.user {
  border-bottom: 2px solid #03bbf8;
  display: flex;
  align-items: center;
  height: 60px;
  cursor: pointer;
  align-self: flex-end;
}
.user>img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0 10px;
}

/* 用户设置区 */
.select{
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 3000;
  cursor: default;
  background-color: #fff;
}
.ul1 {
  padding-top: 20px;
}
.ul1 li {
  list-style: none;
}
.li1 {
  width: 150px;
}
.ul1 .title {
  margin-left: 20px;
  text-align: left;
  color: #a7a1a1;
}
.li2 {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  text-align: center;
  transition: .2s;
}
.li2:hover {
  color: rgb(5, 113, 255);
}

/* 主体部分 */
main.el-main {
  background-color: #e9eef3;
  margin: 0;
  padding: 0;
  text-align: center;
}
</style>